<template>
  <div  class="promote">
    <div>
      <div style="display: inline-block;">
        <el-button type="primary" @click="dialogVisible=true">购买席位</el-button>
        <el-button type="primary" plain>购买企微会话存档</el-button>
      </div>
      <div style="float: right;">
        <el-button type="primary" plain>互通账号购买记录</el-button>
        <el-button type="primary" plain>操作日志</el-button>
        <el-button type="primary" plain>同步成员</el-button>
      </div>
    </div>
    <div style="background-color: #fff;border-radius: 4px;padding: 15px 10px 0;margin-top: 10px;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="席位状态">
          <el-select v-model="value" class="m-2" placeholder="请选择席位状态" size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择部门">
          <el-select v-model="value" class="m-2" placeholder="请选择部门" size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择角色">
          <el-select v-model="value" class="m-2" placeholder="请选择角色" size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择角色">
          <el-input
            v-model="input1"
            class="w-50 m-2"
            placeholder="请输入成员名称"
            :suffix-icon="Search"
            size="large"
          />
        </el-form-item>
        <el-form-item style="float: right;">
          <el-button  @click="onSubmit">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="background-color: #fff;border-radius: 4px;padding: 15px 10px;margin-top: 10px;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" >
          
          </el-table-column>
        <el-table-column prop="date" label="选择全部员工" width="180" />
        <el-table-column prop="name" label="互通账号" width="180" >
          <template #header>
            <span>互通账号</span><span>(0/0)</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="基础席位" >
          <template #header>
            <span>基础席位</span><span>(0/0)</span>
            <div style="color: #b1b3b8;font-size: 12px;">
              <span style="display: inline-block;width: 6px;height: 6px;background-color: #409EFF;border-radius: 3px;"></span>
              <span>2022-11-23 到期</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="营销席位" >
          <template #header>
            <span>营销席位</span><span>(0/0)</span>
            <div style="color: #b1b3b8;font-size: 12px;">
              <span style="display: inline-block;width: 6px;height: 6px;background-color: #409EFF;border-radius: 3px;"></span>
              <span>2022-11-23 到期</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="服务席位" >
          <template #header>
            <span>服务席位</span><span>(0/0)</span>
            <div style="color: #b1b3b8;font-size: 12px;">
              <span style="display: inline-block;width: 6px;height: 6px;background-color: #409EFF;border-radius: 3px;"></span>
              <span>2022-11-23 到期</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="销售席位" >
          <template #header>
            <span>销售席位</span><span>(0/0)</span>
            <div style="color: #b1b3b8;font-size: 12px;">
              <span style="display: inline-block;width: 6px;height: 6px;background-color: #409EFF;border-radius: 3px;"></span>
              <span>2022-11-23 到期</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="会话席位" >
          <template #header>
            <span>会话席位</span><span>(0/0)</span>
            <div style="color: #b1b3b8;font-size: 12px;">
              <span style="display: inline-block;width: 6px;height: 6px;background-color: #409EFF;border-radius: 3px;"></span>
              <span>2022-11-23 到期</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="所属部门" />
        <el-table-column prop="address" label="角色" >
          <template #default="scope">
            <div @click="delwer">1111</div>
          </template>
          </el-table-column>
        <el-table-column prop="address" label="操作" >
          <template #default="scope">
            <el-button
              type="button.type"
              text
              >互通账号迁移</el-button>
              <el-button
              type="button.type"
              text
              >成员详情</el-button>
          </template>
          
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
    >
      <div>

      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
const tableData=ref([{
  address:1
}])
const dialogVisible=ref(false)
const delwer=()=>{
  console.log(1111)
}
</script>
<style>
.promote{
  padding: 20px;
}
</style>